<template>
    <div class="demo01">
        <div class="nav">
            <nav-bar :navData="navData" :creInd="creInd"
                @clickNavItem="clickNavItem"></nav-bar>
            <div class="con">{{conData[creInd]}}</div>
        </div>
    </div>
</template>

<script>
    export default {
        name:"Demo01",
        data(){
            return{
                creInd:0,
                navData:['标题一','标题二',"标题三","标题四"],
                conData:['内容一','内容二',"内容三","内容四"]
            }
        },
        methods:{
            clickNavItem(ind){
                this.creInd = ind;
            }
        }
    }
</script>
<style scoped>
    .nav{
        width: 400px;
        height: 300px;
        margin:30px auto 0;
        border: 1px solid #aaa;
    }
</style>
